<template>
	<view class="text-c">
		<view class="flex_cc uni-my-16 edit" @click="switchStanding">
			<uni-icons type="person-filled" size="20" color="#00ab64"></uni-icons>
			<view>切换为学员</view>
		</view>
		<view class="text-w z-font-60">降杆教练端</view>
		<view class="code-box">
			<xt-verify-code v-model="verifyCode" @confirm="confirm" :size="4" boxActiveColor="#008965"></xt-verify-code>
		</view>
		<view class="z-font-32 uni-mt-32">请输入邀请码</view>
		<image :src="setting.oss_pub_domain + '/app-img/wx-qr-code.png'" class="qr-code uni-mt-108"></image>
		<view class="uni-mt-32">申请邀请码请添加客服</view>
	</view>
</template>

<script setup>
import { inviteCode } from '@/api/index.js';
import { getUserInfo } from '@/api/user.js';
import { ref, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();
const verifyCode = ref('');
function confirm(code) {
	inviteCode(code).then((res) => {
		if (res.status) {
			that.tools.alert('绑定成功');
			getUserInfo().then((res) => {
				Object.assign(that.userInfo, res);
				uni.reLaunch({
					url: '/pages/tabbar-page/tabbar-0'
				})
			});
		} else that.tools.alert('邀请码错误，请联系客服。')
	});
}

function switchStanding() {
	uni.showModal({
		title: '提示',
		content: `是否要切换为学员身份`,
		success: (res) => {
			if (res.cancel) return;
			uni.setStorageSync('start-state', 2);
			uni.reLaunch({
				url: '/pages/tabbar-page/tabbar-0'
			});
		}
	});
}
</script>

<style lang="scss" scoped>
.code-box {
	width: 500rpx;
	margin-left: 125rpx;
	margin-top: 200rpx;
}
.qr-code {
	width: 300rpx;
	height: 300rpx;
	background: #f5f5f5;
}

.edit {
	width: 230rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	border-radius: 20rpx;
	border: 2rpx solid $uni-color-main-grey;
	color: $uni-color-main-grey;
	margin: calc(var(--status-bar-height) + 32rpx) 0 180rpx 500rpx;
}
</style>
